<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
			<swiper-item v-for="item in swiperList">
				<view class="swiper-item">
					<image :src="item" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="nav">
			<view class="navbox">
				<view class="">
					<image src="../../static/img/mall.png" mode="widthFix"></image>
				</view>
				<text>超市</text>
			</view>
			<view class="navbox">
				<view class="">
					<image src="@/static/img/contact-us.png" mode="widthFix"></image>
				</view>
				<text>联系我们</text>
			</view>
			<view class="navbox">
				<view class="">
					<image src="@/static/img/img.png" mode="widthFix"></image>
				</view>
				<text>社区图片</text>
			</view>
			<view class="navbox">
				<view class="">
					<image src="@/static/img/video.png" mode="widthFix"></image>
				</view>
				<text>学习视频</text>
			</view>
		</view>
		<view class="recommend">
			推荐商品
		</view>
		<view class="goods">
			<view class="good-item">
				<image
					src="https://www.apple.com.cn/iphone/home/images/overview/hero/iphone_14_hero__ceub5xriecgi_small_2x.jpg"
					mode="widthFix"></image>
				<view class="price">
					￥6899 <text>￥7237</text>
				</view>
				<view class="title">
					Apple iPhone 12 苹果12 全网通5G 国行正品 二手手机 【苹果12】黑色 【99新】128G 全网通
				</view>
			</view>
			<view class="good-item">
				33333333333
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				swiperList: [
					'https://img10.360buyimg.com/pop/s1180x940_jfs/t1/145721/32/30952/98672/63578695E4ea05916/95cf2046dcb76509.jpg.avif',
					'https://imgcps.jd.com/ling4/100039860256/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6e0/bdbe71d2/cr/s/q.jpg',
					"https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000366/100015023791/FocusFullshop/CkNqZnMvdDEvMTM5MjExLzI1LzMwMjcyLzk3MjIwLzYzNGIwOWRhRWQyOTFiMTUwL2IwYzQwMmNlZjQ1NjA4M2MucG5nEgkzLXR5XzBfNTQwAjjui3pCEwoP5LiJ5pif5pi-56S65ZmoEAFCHAoY576O5aW955Sf5rS75LuO5q2k5byA5aeLEAJCEAoM56uL5Y2z5oqi6LStEAZCCgoG56eN6I2JEAdYr83wyvQC/cr/s/q.jpg",
					"https://img30.360buyimg.com/pop/s1180x940_jfs/t1/199445/22/26798/51069/63564d0dE2a9389fe/cd5c181aa87d3e41.jpg.avif"
				]
			}
		}
	}
</script>

<style scoped lang="scss">
	swiper {
		width: 750rpx;
		height: 380rpx;

		.swiper-item {
			width: 100%;

			image {
				width: 100%;
			}
		}
	}

	.nav {
		display: flex;
		height: 200rpx;
		border-bottom: 6rpx solid #eee;

		.navbox {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			view {
				background-color: #0f43f9;
				border-radius: 50%;
				width: 100rpx;
				height: 100rpx;
				text-align: center;
				line-height: 134rpx;

				image {
					width: 60%;
				}


			}

			text {
				padding-top: 20rpx;
				font-size: 28rpx
			}


		}
	}

	.recommend {
		color: #0f43f9;
		text-align: center;
		font-size: 40rpx;
		letter-spacing: 40rpx;
		padding: 20rpx;
	}

	.goods {
		background-color: #eee;
		padding: 10rpx 0;
		overflow: hidden;

		.good-item {
			float: left;
			margin-left: 2%;
			width: 47%;
			background-color: #fff;
			padding-bottom: 20rpx;

			image {
				width: 100%;
				padding-top: 40rpx
			}

			.price {
				margin-top: 40rpx;
				color: #ff0000;
				font-size: 40rpx;
				padding: 20rpx;

				text {
					text-decoration: line-through;
					color: #888;
					font-size: 24rpx;
					padding-left: 20rpx;
				}
			}

			.title {
				padding: 0 20rpx;
				font-size: 28rpx;
				/* 超出隐藏 */
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				/* 设置行数 */
				-webkit-line-clamp: 2;
				/* 设置超出的部分如何显示 */
				text-overflow: ellipsis;
			}

		}
	}
</style>
